<template>
	<div class="content">
		<div class="video-group">
			<div>

				<video id="video" :ref="setVideoRefList" controls poster="../../static/vv.png" style="height: 200px;"></video>
				<div >
					<u-input v-model="input[0]" placeholder="Please input" style="width: 100px;"></u-input>
					<u-button type="primary" round @click="changeSingeVideo(0)">播放</u-button>
				</div>
			</div>
		<!-- 	<div>
				<video id="video" :ref="setVideoRefList" controls poster="../../static/vv.png"></video>
				<div style="display: flex">
					<el-input v-model="input[0]" placeholder="Please input" />
					<el-button type="primary" round @click="changeSingeVideo(0)">播放</el-button>
				</div>
			</div>
			<div>
				<video id="video" :ref="setVideoRefList" controls poster="../../static/vv.png"></video>
				<div style="display: flex">
					<el-input v-model="input[0]" placeholder="Please input" />
					<el-button type="primary" round @click="changeSingeVideo(0)">播放</el-button>
				</div>
			</div>
			<div>
				<video id="video" :ref="setVideoRefList" controls poster="../../static/vv.png"></video>
				<div style="display: flex">
					<el-input v-model="input[0]" placeholder="Please input" />
					<el-button type="primary" round @click="changeSingeVideo(0)">播放</el-button>
				</div>
			</div>
			<div>
				<video id="video" :ref="setVideoRefList" controls poster="../../static/vv.png"></video>
				<div style="display: flex">
					<el-input v-model="input[0]" placeholder="Please input" />
					<el-button type="primary" round @click="changeSingeVideo(0)">播放</el-button>
				</div>
			</div>
			<div>
				<video id="video" :ref="setVideoRefList" controls poster="../../static/vv.png"></video>
				<div style="display: flex">
					<el-input v-model="input[0]" placeholder="Please input" />
					<el-button type="primary" round @click="changeSingeVideo(0)">播放</el-button>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script setup>
// 插件
import { ref,onUnmounted,onMounted,nextTick } from 'vue';
import mpegts from 'mpegts.js'
const input = ref(['http://1.12.237.14:8432/live?port=1935&app=live&stream=myapp'])
const videoRefList = ref([])
const initCreatePlay = ref([])
const option = {
	enableStashBuffer: false,
	liveBufferLatencyChasing: true,
	liveBufferLatencyChasingOnPaused: true,
	liveSync: true,
	accurateSeek: true,
	liveBufferLatencyMaxLatency: 0.9,
	liveBufferLatencyMinRemain: 0.2,
	customSeekHandler: true,
	lazyLoad: false,
	reuseRedirectedURL: true,
	liveSyncPlaybackRate: 3.4
}
const setVideoRefList = (ele) => {
	videoRefList.value.push(ele?.$el)
}

const changeSingeVideo = (idx) => {
	initCreatePlay.value[idx].destroy()
	initCreatePlay.value[idx] = mpegts.createPlayer(
		{
			type: 'flv', // could also be mpegts, m2ts, flv
			isLive: true,
			// url: "http://1.12.237.14:8432/live?port=1935&app=live&stream=myapp",
			url: input.value[idx],
			hasAudio: false,
			hasVideo: true
		},
		{
			...option
		}
	)
	
	initCreatePlay.value[idx].attachMediaElement(videoRefList.value[idx])
	initCreatePlay.value[idx].load()
	console.log( initCreatePlay.value[idx])
	initCreatePlay.value[idx].play()
}

const initVideo = function () {
	try {
		if (mpegts.getFeatureList().mseLivePlayback) {
			videoRefList.value.forEach((el, idx) => {
				initCreatePlay.value.push(
					mpegts.createPlayer(
						{
							type: 'flv', // could also be mpegts, m2ts, flv
							isLive: true,
							url: 'http://1.12.237.14:8432/live?port=1935&app=live1&stream=myapp1',
							hasAudio: false,
							hasVideo: true
						},
						{
							...option
						}
					)
				)
				console.log(
					mpegts.createPlayer(
						{
							type: 'flv', // could also be mpegts, m2ts, flv
							isLive: true,
							url: 'http://1.12.237.14:8432/live?port=1935&app=live1&stream=myapp1',
							hasAudio: false,
							hasVideo: true
						},
						{
							...option
						}
					),
					'sfsdf'
				)
				initCreatePlay.value[idx].attachMediaElement(el)
				initCreatePlay.value[idx].load()
				// initCreatePlay.value[idx].play();
			})
		}
	} catch (error) {
		console.log('===initVideo', error)
	}
}
onUnmounted(() => {
	videoRefList.value.forEach((el, idx) => {
		initCreatePlay.value[idx].destroy()
	})
})

onMounted(() => {
	initVideo()
})
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	overflow: auto;
	.video-group {
		flex-grow: 1;
		display: flex;
		flex-wrap: wrap;
		background-size: 100% 100%;
		object-fit: cover;
		padding: 10px;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		& > div {
			width: 30%;
			// display: flex;
			// flex-direction: column;
			margin-bottom: 10px;
			video {
				// width: 100%;
				width: 250px;
				height: 80%;
				margin: auto;
				// flex-grow: 1;
			}
		}
		& > div:last-child {
			margin-bottom: unset;
		}
	}
	#video {
		transform: translate3d(0, 0, 0);
		vertical-align: middle;
	}
}
::-webkit-scrollbar {
	width: 0px;
}
</style>
